<template>
    <view class="car_info">
        <up-form :model="info" labelWidth="90px">
            <ssection title="车辆信息"></ssection>
            <up-cell-group>
                <up-cell title="车牌号" :value="info.licensePlateNumber"></up-cell>
                <up-cell title="车辆类型" :value="jsonstrToObj(info.carType)" isLink
                    @click="openOrCancelPicker('carType')"></up-cell>
                <up-picker :show="selectObj.carType" @confirm="(e) => pickerChange(e, 'carType')"
                    :columns="[carTypeList]" keyName='name' @cancel="openOrCancelPicker('carType')"></up-picker>

                <up-cell title="车辆颜色" :value="jsonstrToObj(info.carColor)" isLink
                    @click="openOrCancelPicker('carColor')"></up-cell>
                <up-picker :show="selectObj.carColor" @confirm="(e) => pickerChange(e, 'carColor')"
                    :columns="[carColorList]" keyName='name' @cancel="openOrCancelPicker('carColor')"></up-picker>

                <up-cell title="车牌颜色" :value="getPlateColour(info.plateColour)" isLink
                    @click="openOrCancelPicker('plateColour')"></up-cell>
                <up-picker :show="selectObj.plateColour" @confirm="(e) => pickerChange(e, 'plateColour')"
                    :columns="[plateColour]" keyName='name' @cancel="openOrCancelPicker('plateColour')"></up-picker>

                <up-cell title="车辆能源" :value="jsonstrToObj(info.carEnergyType)" isLink
                    @click="openOrCancelPicker('carEnergyType')"></up-cell>
                <up-picker :show="selectObj.carEnergyType" @confirm="(e) => pickerChange(e, 'carEnergyType')"
                    :columns="[carEnergyList]" keyName='name' @cancel="openOrCancelPicker('carEnergyType')"></up-picker>

                <up-cell title="使用性质" :value="jsonstrToObj(info.natureUsage)" isLink
                    @click="openOrCancelPicker('natureUsage')"></up-cell>
                <up-picker :show="selectObj.natureUsage" @confirm="(e) => pickerChange(e, 'natureUsage')"
                    :columns="[natureUsage]" keyName='name' @cancel="openOrCancelPicker('natureUsage')"></up-picker>


                <up-collapse>
                    <up-collapse-item title="尺寸(长/宽/高)" name="size">
                        <template #value>
                            <text>{{ info.carLegth }}*{{ info.width }}*{{ info.carHigh }}mm</text>
                        </template>
                        <div class="u-collapse-content">
                            <up-form-item label="车长" border-bottom>
                                <up-input type="number" v-model="info.carLegth" border="none"></up-input>
                            </up-form-item>
                            <up-form-item label="车宽" border-bottom>
                                <up-input type="number" v-model="info.width" border="none"></up-input>
                            </up-form-item>
                            <up-form-item label="车高" border-bottom>
                                <up-input type="number" v-model="info.carHigh" border="none"></up-input>
                            </up-form-item>
                        </div>
                    </up-collapse-item>
                </up-collapse>

                <up-collapse>
                    <up-collapse-item title="车重" name="weight">
                        <template #value>
                            <text>{{ info.carWeight }}kg</text>
                        </template>
                        <div class="u-collapse-content">
                            <up-form-item label="车重" border-bottom>
                                <up-input type="number" v-model="info.carWeight" border="none"></up-input>
                            </up-form-item>
                        </div>
                    </up-collapse-item>
                </up-collapse>

                <up-collapse>
                    <up-collapse-item title="核定载重量" name="loadCapacity">
                        <template #value>
                            <text>{{ info.loadCapacity }}kg</text>
                        </template>
                        <div class="u-collapse-content">
                            <up-form-item label="核定载重量" border-bottom>
                                <up-input type="number" v-model="info.loadCapacity" border="none"></up-input>
                            </up-form-item>
                        </div>
                    </up-collapse-item>
                </up-collapse>

                <up-cell title="证件管理" :value="fileStatus(info)" isLink @click="reupload"></up-cell>
            </up-cell-group>

            <ssection title="挂车信息" ></ssection>
            <up-cell-group >
                <up-cell title="车牌号" :value="info.trailerLicensePlateNumber"></up-cell>
                <up-cell title="车辆颜色" :value="jsonstrToObj(info.trailerCarColor)" isLink
                    @click="openOrCancelPicker('trailerCarColor')"></up-cell>
                <up-picker :show="selectObj.trailerCarColor" @confirm="(e) => pickerChange(e, 'trailerCarColor')"
                    :columns="[carColorList]" keyName='name'
                    @cancel="openOrCancelPicker('trailerCarColor')"></up-picker>

                <up-cell title="车牌颜色" :value="getPlateColour(info.trailerPlateColour)" isLink
                    @click="openOrCancelPicker('trailerPlateColour')"></up-cell>
                <up-picker :show="selectObj.trailerPlateColour" @confirm="(e) => pickerChange(e, 'trailerPlateColour')"
                    :columns="[plateColour]" keyName='name'
                    @cancel="openOrCancelPicker('trailerPlateColour')"></up-picker>

                <up-cell title="使用性质" :value="jsonstrToObj(info.trailerNatureUsage)" isLink
                    @click="openOrCancelPicker('trailerNatureUsage')"></up-cell>
                <up-picker :show="selectObj.trailerNatureUsage" @confirm="(e) => pickerChange(e, 'trailerNatureUsage')"
                    :columns="[natureUsage]" keyName='name'
                    @cancel="openOrCancelPicker('trailerNatureUsage')"></up-picker>

                <up-collapse>
                    <up-collapse-item title="尺寸(长/宽/高)" name="trailerSize">
                        <template #value>
                            <text>{{ info.trailerCarLegth }}*{{ info.trailerWidth }}*{{ info.trailerCarHigh }}mm</text>
                        </template>
                        <div class="u-collapse-content">
                            <up-form-item label="车长" border-bottom>
                                <up-input type="number" v-model="info.trailerCarLegth" border="none"></up-input>
                            </up-form-item>
                            <up-form-item label="车宽" border-bottom>
                                <up-input type="number" v-model="info.trailerWidth" border="none"></up-input>
                            </up-form-item>
                            <up-form-item label="车高" border-bottom>
                                <up-input type="number" v-model="info.trailerCarHigh" border="none"></up-input>
                            </up-form-item>
                        </div>
                    </up-collapse-item>
                </up-collapse>

                <up-collapse>
                    <up-collapse-item title="车重" name="trailerCarWeight">
                        <template #value>
                            <text>{{ info.trailerCarWeight }}kg</text>
                        </template>
                        <div class="u-collapse-content">
                            <up-form-item label="车重" border-bottom>
                                <up-input type="number" v-model="info.trailerCarWeight" border="none"></up-input>
                            </up-form-item>
                        </div>
                    </up-collapse-item>
                </up-collapse>

            </up-cell-group>
        </up-form>
        <view style="padding-bottom: 30px;">
            <up-button type="primary" color="rgb(0,129,255)" style="border-radius: 5px;margin-top: 20px;" @click="save"
                :loading="loading" loadingText="正在修改">保存修改</up-button>
        </view>
    </view>

    <up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { nextTick, reactive, ref } from 'vue'
import { getCarType, getCarColor, getCarEnergy, getCarInfo, editCar } from '@/api/car'
import ssection from '@/components/ssection.vue'



/* 数据 */
const uToastRef = ref<any>(null)
const loading = ref(false)
const id = ref('')
// 车信息
const info = reactive<any>({})
// 车辆类型
const carTypeList = reactive([])
// 车辆颜色
const carColorList = reactive([])
// 车辆能源类型
const carEnergyList = reactive([])
// 使用性质
const natureUsage = reactive([{
    code: 0,
    name: '运营'
}, {
    code: 1,
    name: '非运营'
}, {
    code: 2,
    name: '货运'
}])
// 车牌颜色
const plateColour = reactive([{
    code: '1',
    name: '蓝色'
}, {
    code: '2',
    name: '黄色'
}, {
    code: '3',
    name: '黑色'
}, {
    code: '4',
    name: '白色'
}, {
    code: '5',
    name: '绿色'
}, {
    code: '91',
    name: '农黄色'
}, {
    code: '92',
    name: '农绿色'
}, {
    code: '93',
    name: '黄绿色'
}, {
    code: '94',
    name: '渐变绿'
}, {
    code: '9',
    name: '其他'
}])
// const plateColour = reactive([{
//     code: '1',
//     name: '黄底黑字'
// }, {
//     code: '2',
//     name: '绿底黑字'
// }, {
//     code: '3',
//     name: '蓝底黑字'
// }, {
//     code: '4',
//     name: '渐变绿'
// }, {
//     code: '5',
//     name: '黄绿色'
// }])
const selectObj = reactive({
    // 车辆类型选择
    carType: false,
    // 车辆颜色选择
    carColor: false,
    // 车牌颜色选择
    plateColour: false,
    // 车辆能源类型选择
    carEnergyType: false,
    // 车辆使用性质选择
    natureUsage: false,
    // 挂车车辆颜色选择
    trailerCarColor: false,
    // 挂车车牌颜色选择
    trailerPlateColour: false,
    // 挂车使用性质选择
    trailerNatureUsage: false
})


/* 方法 */
// 获取车牌颜色
const getPlateColour = (plate: string) => {
    let name = ''
    plateColour.forEach(item => {
        if (item.code == plate) {
            name = item.name
        }
    })
    return name
}
// 获取车辆信息
const getCar = async (id: string) => {
    let res: any = await getCarInfo({ id })
    if (res.success) {
        Object.assign(info, res.data)
    } else {
        uToastRef.value.show({
            position: 'top',
            message: res.message,
            type: 'error'
        })
    }
}
// 获取车辆类型，颜色，能源类型封装
const getCarTypeList = async (fn: Function, list: Array<any>) => {
    let res = await fn()
    if (res.success) {
        list.push(...res.data)
    } else {
        uToastRef.value.show({
            position: "top",
            message: res.message,
            type: 'warning'
        })
    }
}
// 开启关闭对应选择框
const openOrCancelPicker = (str: string) => {
    selectObj[str as keyof typeof selectObj] = !selectObj[str as keyof typeof selectObj]
}
// 对应选择框选择
const pickerChange = (e: any, str: string) => {
    if (str === 'plateColour' || str === 'trailerPlateColour') {
        info[str] = e.value[0].code
    } else {
        info[str as keyof typeof info] = JSON.stringify({
            text: e.value[0].name,
            code: e.value[0].code
        })
    }
    selectObj[str as keyof typeof selectObj] = false
}
// JSON字符串转对象
const jsonstrToObj = (str: string) => {
    if (str) {
        return JSON.parse(str).text
    } else {
        return ''
    }
}
// 文件上传状态
const fileStatus = (data: any) => {
    let {
        permitPic,
        permitBackPic,
        roadTransCertPic,
        safePic
    } = data
    return !permitPic && !permitBackPic && !roadTransCertPic && !safePic ? '未上传' : permitPic &&
        permitBackPic && roadTransCertPic && safePic ? '已上传' : '未完全上传'
}
// 保存
const save = async () => {
    uToastRef.value.show({
        message: "正在保存",
        type: 'loading',
        duration: -1
    })
    loading.value = true
    let res = await editCar(info)
    loading.value = false
    if (res.success) {
        uToastRef.value.show({
            position: 'top',
            message: '修改成功',
            type: 'success'
        })
        await getCar(info.id)
    } else {
        uToastRef.value.hide()
    }
}
const reupload = () => {
    uni.navigateTo({
        url: `/package_mine/pages/car/carFile?id=${info.id}`
    })
}
// 初始化封装
const init = async () => {
    uToastRef.value.show({
        message: "正在获取车辆信息",
        type: 'loading',
        duration: -1
    })
    await getCarTypeList(getCarType, carTypeList)
    await getCarTypeList(getCarColor, carColorList)
    await getCarTypeList(getCarEnergy, carEnergyList)
    await getCar(id.value)
    uToastRef.value.hide()
}




/* 钩子 */
onLoad(async (options: any) => {
    id.value = options.id
    await nextTick()
    await init()
})

</script>

<style lang="scss" scoped>
.car_info {
    min-height: calc(100vh - 44px);
    background-color: #fff;
    padding: 10px;
}
</style>
